<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Elevation</h1>
        <p>Elevation is an add-on utility of <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> and used to specify the separation between surfaces and elements along the z-axis.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="p-grid">
        <div class="p-col" *ngFor="let box of boxes; index as i">
            <div [class]="'box p-shadow-' + (i + 1)">
                p-shadow-{{i + 1}}
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Getting Started</h5>
            <p>Elevation is added to an element using the <i>.p-shadow-&#123;level&#125;</i> class.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-shadow-1" /&gt;
</app-code>

            <h5>Levels</h5>
            <p>There are 24 depths available varying from 1 to 24.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt;
</app-code>

            <h5>Dependencies</h5>
            <p>PrimeFlex.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-primeflex-elevation-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col" *ngFor="let box of boxes; index as i"&gt;
        &lt;div [class]="'box p-shadow-' + (i + 1)"&gt;
            p-shadow-&#123;&#123;i + 1&#125;&#125;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ElevationDemo &#123;

    boxes: Array&lt;number&gt; = new Array(24);
    
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>